<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析VueComponent</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    分析Vue和VueComponent
        1.Weather组件的本质是一个构造波函数
        2.Weather确实是一个构造函数.但不是程序员亲自定义的构造函数.是Vue.extend生成的
        3.我们以后只要去写<Weather/>,Vue底层代码就会帮我们执行new Weather(options)
        4.Vue.extend调用的返回值时VueComponent构造函数 所以new Weather其实就是在new VueComponent
        5.每次调用Vue.extend都是返回一个全新的VueComponent!!!!
        6.所谓的组件实例对象,其实就是VueComponent的实例.以后均简称vc,Vue的实例对象 以后均简称vm
        7.创建组件时,配置选中的data函数,methods的方法,watch中的函数,computed函数中的this均指向vc
        创建vm配置中的data中的函数,methods的方法,watch中的函数,computed函数中的this均指向vm
        8.VueComponent继承了Vue.所以Vue.prototype上的属性和方法 vc都能看得见
-->
<div id="root">
    <Weather></Weather>
    <Person></Person>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    //定义Weather组件
    const Weather = Vue.extend({
        template: `
          <div>
          <h1>今天天气很{{isHot?"炎热":"凉爽"  }}</h1>
          <button @click="changeWeather">切换天气</button>
          </div>

        `,
        data() {
            console.log('Weather组件中的data函数中的this是:',this)
            return {
                isHot: true
            }
        },
        methods: {
            changeWeather(){
                console.log('Weather组件中methods中的方法的this是:',this)
                this.isHot=!this.isHot
            }
        },
        watch:{
            isHot(){
                console.log('Weather组件中的watch中方法的this是:',this)
            }
        }
    })
    const Person =Vue.extend({
        template: '<h2>我是Person组件</h2>'
    })
    new Vue({
        el: "#root",
        components: {
            Weather,
            Person
        }
    })
</script>
</body>
</html>
